<template>
	<view class="container">
		<view class="boxs">
			<view class="box">
				<view class="text1">
					{{ shopTotal }}
				</view>
				<view class="text2">购买商品总金额</view>
			</view>
			<view class="box">
				<view class="text1">
					{{ rebate }}
				</view>
				<view class="text2">已返还总额</view>
			</view>
		</view>
		<view v-if="shopList.length == 0">
			<view style="padding-top: 100rpx">
				<u-empty text="暂无能申请的返还记录" mode="list"></u-empty>
			</view>
		</view>
		<view v-if="shopList.length > 0">
			<view v-for="(item, index) in shopList" :key="index" class="list">
				<view class="top">
					<view>时间：{{ item.createtime | handleMatterDate }}</view>
					<view>
						<view class="btn" @click="sh(item)" v-if="item.is_apply == 1">申请立即到账</view>
					</view>
				</view>
				<view class="bottom">
					<view>系统导入：{{ item.money }}元</view>
					<view>状态：已到账</view>
				</view>
				<view class="bottom">
					<view v-if="item.type == 1">购买增加：{{ item.money }}元</view>
					<view v-else>推荐返还：{{ item.price }}元</view>
					<view>状态：{{ item.status_text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			shopTotal: 0,
			rebate: 0,
			shopList: [],
			shopPriceList: [],
			page: 1,
			totalPage: 1
		};
	},
	onLoad() {
		this.getList();
	},
	onReachBottom() {
		this.page++;
		if (this.page > this.totalPage) {
			return this.$wanlshop.msg('我也是有底线的');
		}
		this.getList();
	},
	filters: {
		handleMatterDate(val) {
			let num = val * 1000;
			let date = new Date(num);
			let year = date.getFullYear();
			let month = date.getMonth() + 1 > 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
			let day = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate();
			let hours = date.getHours() > 10 ? date.getHours() : '0' + date.getHours();
			let min = date.getMinutes() > 10 ? date.getMinutes() : '0' + date.getMinutes();
			let second = date.getSeconds() > 10 ? date.getSeconds() : '0' + date.getSeconds();
			return `${year}-${month}-${day} ${hours}:${min}:${second}`;
		}
	},
	methods: {
		getList() {
			let shopItemId = uni.getStorageSync('shopItemId');
			this.$request({
				url: 'member/rebate_list',
				method: 'post',
				data: {
					shop_id: shopItemId,
					page: this.page,
					limit: 10
				}
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					this.shopTotal = data.order_price;
					this.rebate = data.back_price;
					this.totalPage = data.last_page;
					this.shopList = [...this.shopList, ...data.data];
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					});
				}
			});
		},
		sh(item) {
			let that = this;
			uni.showModal({
				cancelText: '取消申请',
				cancelColor: '#999',
				confirmColor: '#E4B77F',
				confirmText: '继续申请',
				title: '温馨提示',
				content: '将提交商家管理员审核，审核通过后，您购买的商品将不再支持7天无理由退货！您是否同意申请？',
				success(res) {
					if (res.confirm) {
						that.shqRequest(item);
					}
				}
			});
		},
		// 申请立即到账请求
		shqRequest(item) {
			const that = this;
			this.$request({
				url: 'member/rebate_apply',
				method: 'post',
				data: {
					id: item.id
				}
			}).then((res) => {
				const { code, msg } = res.data;
				if (code == 1) {
					uni.showToast({
						icon: 'success',
						title: '申请成功'
					});
					that.shopList = [];
					that.getList();
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f2f3f7;
}

.container {
	width: 100%;
}

.boxs {
	width: 686rpx;
	height: 164rpx;
	background: #ffffff;
	margin: 20rpx auto;
	display: flex;
	border-radius: 20rpx;
	.box {
		flex: 1;
		text-align: center;

		.text1 {
			font-family: AppleSystemUIFont;
			font-size: 44rpx;
			color: #333333;
			margin-top: 30rpx;
		}

		.text2 {
			font-size: 24rpx;
			color: #333333;
			margin-top: 20rpx;
		}
	}
}
.list {
	width: 686rpx;
	padding-bottom: 20rpx;
	background: #fff;
	margin: 0 auto;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
	.top {
		width: 622rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #999;
		display: flex;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f4f5f9;
		justify-content: space-between;
		padding-top: 30rpx;
		.btn {
			width: 176rpx;
			height: 54rpx;
			background: linear-gradient(154deg, #e4b77f 0%, #cd9c61 100%);
			border-radius: 10rpx;
			line-height: 54rpx;
			text-align: center;
			color: #fff;
			font-size: 24rpx;
		}
	}
	.bottom {
		width: 622rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #666;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}
}
</style>
